<template>
	<view class="table-wrap">
		<view class="s-table">
			<view class="tr sticky-top" :style="{ background: opt.headerBgColor, minWidth: tableWidth + 'rpx'}">
				<view
					:class="['td', 'tdName', item.key == 'name' ? 'sticky-left' : '']"
					:style="{
						background: opt.headerBgColor,
						width: item.width + 'rpx',
						color: opt.headerColor,
						display: item.checked ? 'flex' : 'none',
						
					}"
					v-for="(item, index) in headers"
					:key="index"
				>
					<view class="head-block" @click="sortFuc(item)">
						<view class="head-block-item" v-if="title && index == 0" :style="{ 'white-space': toDetail ? 'nowrap' : 'normal' }">{{ title }}</view>
						<view class="head-block-item" v-else :style="{ 'white-space': toDetail ? 'nowrap' : 'normal' }">
							
							<view v-if="!item.name||item.name.indexOf('/')==-1">
								{{ item.name }}
							</view>
							<view v-else>
								<view class="" v-for="(n,nidx) in item.name.split('/')" :key="nidx">
									{{n}}
								</view> 
							</view>
						</view>

						<view class="header-icon" v-if="item.sort">
							<text
								class="iconfont icon-arrow-up"
								:style="{color: sortKey === item.key && sortType == 'asc' ? '#1271ba' : '#80afd4' }"
							/>

							<text
								class="iconfont icon-arrow-down"
								:style="{ color: sortKey === item.key && sortType == 'desc' ? '#1271ba' : '#80afd4' }"
							/>
						</view>
					</view>
				</view>
			</view>
			<!-- 全部 -->
			<view class="tr trName" v-if="totals.name" :style="{ minWidth: tableWidth + 'rpx', }">
				<view
					:class="['td', item.key == 'name' ? 'sticky-left' : '']"
					:style="{ width: item.width + 'rpx' , display: item.checked ? 'inline-block' : 'none' }"
					v-for="(item, index) in headers" :key="index">
					<text v-if="item.head">{{item.head}}</text>
					<text v-else>{{ item.fixed ? Number(totals[item.key] || 0).toFixed(item.fixed) : totals[item.key] ||
							0
					}}{{ item.unit || '' }}</text>
				</view>
			</view>
			<!-- 全部 end -->
			<view
				class="tr"
				v-for="(trdata, tridx) in tableData"
				:key="tridx"
				:style="{ minWidth: tableWidth + 'rpx', display: trdata.showRow || (!showMore && tridx > 4) ? 'none' : 'flex' }"
				@click.stop="toContractDetail(trdata, 'name')"
			>
				<view
					:class="['td', item.key == 'name' ? 'sticky-left' : '']"
					:style="{ width: item.width + 'rpx', color: sortKey === item.key || item.hasCheck ? '#1271ba' : '#333', display: item.checked ? 'inline-block' : 'none' }"
					v-for="(item, index) in headers"
					:key="index"
				>
					<text :class="[item.key == 'name' && toDetail ? 'oneColor' : '']">
						{{ item.fixed ? Number(trdata[item.key] || 0).toFixed(item.fixed) : trdata[item.key] || 0 }}{{ item.unit || '' }}
					</text>
					<text class="upper" v-if="item.key === 'name' && toDetail"></text>
				</view>
			</view>
		</view>
		<view class="table-more" v-if="tableData.length > 5">
			<view @click="showMore = !showMore">
				<image :style="showMore ? 'transform:rotate(180deg)' : ''" src="@/static/images/down.png" class="img" mode=""></image>
				{{ showMore ? '向上收起' : '向下展开' }}
			</view>
		</view>
	</view>
</template>

<script>
// {
// 	name: '东区组', //表头名称
// 	sort: false, //是否开启该列的排序功能
// 	width: 160, //列宽
//  fixed:1,   //保留小数位数
// 	key: 'name', //显示哪个字段
// 	unit: '' //单位
//  hasCheck:true ,//是否可以点击
// },
export default {
	name: 's-table',
	props: {
		title: String,
		headers: {
			type: Array,
			default: () => []
		},
		dataList: {
			type: Array,
			default: () => []
		},
		totals: {
			// 全部
			type: Object,
			default: () => {
				return {};
			}
		},
		opt: {
			// 默认配置
			type: Object,
			default: () => {
				return {
					tableHeigth: '340rpx',
					bgColor: '#fff',
					headerBgColor: '#d6edff',
					headerColor: '#1271BA',
					borderColor: '#f0f9ff'
				};
			}
		},
		defBgColor: {
			// 默认背景颜色
			type: String,
			default: '#fff'
		},
		defHeaderBgColor: {
			// 默认背景颜色
			type: String,
			default: '#fff'
		},
		// 合同统计跳转详情
		toDetail: {
			type: Boolean,
			default: false
		},
		// 合同统计页默认排序
		defaultSort: {
			type: Boolean,
			default: false
		},
	},

	data() {
		return {
			showMore: false,
			tableData: [],
			// 排序字段
			sortKey: '', 
			// asc正序 desc降序
			sortType: '' 
		};
	},
	watch: {
		dataList(val) {
			this.initData(val);
		}
	},
	computed: {
		tableWidth() {
			let width = 0;
			for (let i = 0; i < this.headers.length; i++) {
				if (this.headers[i].checked) {
					width = width + Number(this.headers[i].width);
				}
			}
			return width;
		}
	},
	created() {
		this.initData(this.dataList);
	},
	methods: {
		initData(list) {
			let dataList = JSON.parse(JSON.stringify(list));
			if (this.headers.length) {
				let sortKey = '';
				for (let i = 0; i < this.headers.length; i++) {
					if (this.headers[i].sort) {
						sortKey = this.headers[i].key;
						break;
					}
				}
				if (sortKey) {
					this.sortKey = sortKey;
					this.sortType = 'desc';
					dataList.sort(this.descFuc);
				}
				if (this.defaultSort) {
					this.sortKey = 'defaultSort';
					dataList.sort((a, b) => a.status - b.status); 
				}
			}
			this.tableData = dataList;
		},
		// 跳转
		toContractDetail(item, name) {
			// eslint-disable-next-line
			this.$emit('toContractDetail', {
				item,
				key: 'name',
				keyVal: name
			});
		},
		// 排序
		sortFuc(item) {
			if (!item.sort) {
				return;
			}
			let list = JSON.parse(JSON.stringify(this.tableData));
			this.sortKey = item.key;
			if (!this.sortType || this.sortType == 'asc') {
				this.sortType = 'desc';
				list.sort(this.descFuc);
			} else {
				this.sortType = 'asc';
				list.sort(this.ascFuc);
			}

			this.tableData = list;
		},

		// 升序排序函数
		ascFuc(x, y) {
			if (x[this.sortKey] && typeof x[this.sortKey] == 'string' && x[this.sortKey].indexOf('时') != -1) {
				let left = x[this.sortKey].replaceAll('小时', ',');
				left = left.replaceAll('时', ',');
				left = left.replaceAll('分', '');
				left = left.split(',');
				let right = y[this.sortKey].replaceAll('小时', ',');
				right = right.replaceAll('时', ',');
				right = right.replaceAll('分', '');
				right = right.split(',');
				if (left.length == 1) {
					left.push(0);
				}
				if (right.length == 1) {
					right.push(0);
				}
				// console.log('asda',left,right,left[1]<right[1])
				if (left[0] * 1 < right[0] * 1) {
					return -1;
				} else if (left[0] == right[0] && left[1] * 1 < right[1] * 1) {
					return -1;
				} else {
					return 1;
				}
			} else {
				return Number(x[this.sortKey]) > Number(y[this.sortKey]) ? 1 : -1;
			}
		},

		// 降序排序函数
		descFuc(x, y) {
			if (x[this.sortKey] && typeof x[this.sortKey] == 'string' && x[this.sortKey].indexOf('时') != -1) {
				let left = x[this.sortKey].replaceAll('小时', ',');
				left = left.replaceAll('时', ',');
				left = left.replaceAll('分', '');
				left = left.split(',');
				let right = y[this.sortKey].replaceAll('小时', ',');
				right = right.replaceAll('时', ',');
				right = right.replaceAll('分', '');
				right = right.split(',');
				if (left[0] * 1 > right[0] * 1) {
					return -1;
				} else if (left[0] == right[0] && left[1] * 1 > right[1] * 1) {
					return -1;
				} else {
					return 1;
				}
			} else {
				return Number(x[this.sortKey]) < Number(y[this.sortKey]) ? 1 : -1;
			}
		}
	}
};
</script>

<style lang="scss" scoped>
@import '@/components/tagsComponents/iconfont.css';
.table-wrap {
	width: 100%;
}

.s-table {
	width: 100%;
	font-size: 26rpx;
	overflow: scroll;

	.tr {
		width: auto;
		white-space: nowrap;
		display: flex;
		height: 64rpx;
		
	}
	.trName{
		font-weight: bold;
	}

	.td {
		display: inline-block;
		text-align: center;
		height: 40rpx;
		line-height: 40rpx;
		padding: 12rpx 12rpx;
		margin: 0;
		font-size: 26rpx;
		color: #333;
		background: #fff;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;

		.upper {
			width: 12rpx;
			height: 12rpx;
			border-right: 2rpx #0091ff solid;
			border-bottom: 2rpx #0091ff solid;
			transform: rotate(-45deg);
			display: inline-block;
			margin-left: 10rpx;
		}
	}
	.tdName{
		line-height: 56rpx;
		align-items: center;
		height: auto
	}

	.oneColor {
		font-size: 26rpx;
		font-weight: 400;
		color: #0091ff;
	}

	.tr:nth-child(2n-1) {
		background: #f0f9ff;

		.td {
			background: #f0f9ff;
		}
	}

	.sticky-left {
		position: sticky;
		left: 0;
		z-index: 8;
		box-shadow: 4px 0 4px rgba(90, 111, 132, 0.12);
	}

	.sticky-top {
		position: sticky;
		top: 0;
		z-index: 8;
		height: auto;
	}

	.head-block {
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
		.head-block-item{
			line-height: 37rpx;
		}

		.header-icon {
			width: 22rpx;
			line-height: 20rpx;
			display: flex;
			flex-direction: column;
			margin-left: 8rpx;
			justify-content: center;
			margin-bottom: 6rpx;
			.iconfont{
				font-size:16rpx;
				height:16rpx;
			}
		}
	}
}

::-webkit-scrollbar {
	width: 0;
	height: 0;
	color: transparent;
}

.table-more {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #999;
	padding-top: 15rpx;
	font-size: 26rpx;

	.img {
		width: 22rpx;
		height: 22rpx;
		transition: 0.3s all;
		margin-right: 10rpx;
	}
}
</style>
